<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入姓名" suffix-icon="el-icon-search"
                v-model="name"></el-input>
      <el-input style="width: 200px" placeholder="请输入性别" suffix-icon="el-icon-message" class="ml-5"
                v-model="sex"></el-input>
      <el-input style="width: 200px" placeholder="请输入学院" suffix-icon="el-icon-position" class="ml-5"
                v-model="college"></el-input>
      <el-input style="width: 200px" placeholder="请输入年级" suffix-icon="el-icon-position" class="ml-5"
                v-model="grade"></el-input>
      <el-button class="ml-5" type="primary" @click="load">查询</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-button type="primary" @click="handleAdd" v-if="user.role === 'ROLE_ADMIN'">新增 <i
          class="el-icon-circle-plus-outline"></i></el-button>
    </div>

    <!-- 班级信息 -->
    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
              @selection-change="handleSelectionChange">
      <el-table-column prop="id" label="id" width="50"></el-table-column>
      <el-table-column prop="uid" label="uid" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名" show-password width="100"></el-table-column>
      <el-table-column prop="sex" label="性别" width="70">
        <template scope="scope">
          <p v-if="scope.row.sex===0">男</p>
          <p v-if="scope.row.sex===1">女</p>
        </template>
      </el-table-column>
      <el-table-column prop="college" label="学院" width="120">
        <template scope="scope">
          <p v-if="scope.row.college=='1'">计算机学院</p>
          <p v-if="scope.row.college=='2'">商学院</p>
          <p v-if="scope.row.college=='3'">经济管理学院</p>
          <p v-if="scope.row.college=='4'">航空航天学院</p>
          <p v-if="scope.row.college=='5'">工程物理学院</p>
        </template>
      </el-table-column>
      <el-table-column prop="school" label="入学时间"></el-table-column>
      <el-table-column prop="myClass" label="班级"></el-table-column>
      <el-table-column prop="teacher" label="班主任" width="100"></el-table-column>
      <el-table-column prop="msg" label="留言"></el-table-column>
      <el-table-column label="操作" width="400" align="center">
        <template slot-scope="scope">
          <el-button type="success" slot="reference" @click="editScore(scope.row.id)">录入成绩 <i
              class="el-icon-document"></i></el-button>
          <el-button type="primary" slot="reference" @click="editSubject(scope.row.id)"
                     v-if="user.role === 'ROLE_ADMIN'">修改课程 <i
              class="el-icon-document"></i></el-button>
          <el-button type="success" @click="handleEdit(scope.row)" v-if="user.role === 'ROLE_ADMIN'">编辑 <i
              class="el-icon-edit"></i></el-button>
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)">
            <el-button type="danger" slot="reference" v-if="user.role === 'ROLE_ADMIN'">删除 <i
                class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!-- 新增或编辑的学生信息 -->
    <el-dialog title="学生信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="80px" size="small">
        <el-form-item label="id">
          <el-input v-model="form.id" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="uid">
          <el-input v-model="form.uid" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="form.sex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="form.college" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年级">
          <el-input v-model="form.grade" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="form.myClass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="班主任">
          <el-input v-model="form.teacher" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="留言">
          <el-input v-model="form.msg" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 显示选课信息 -->
    <el-dialog title="选课信息" :visible.sync="viewDialogVis" width="30%">
      <el-table :data="mySubs" border stripe>
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="subject" label="课程"></el-table-column>
        <el-table-column prop="score" label="学分"></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 回显课程信息  并修改 -->
    <el-dialog title="修改课程" :visible.sync="editSubjectVis" width="30%">
      <el-table :data="mySubs2" border stripe>
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="subject" label="课程"></el-table-column>
        <el-table-column prop="score" label="学分"></el-table-column>
        <el-table-column label="课程">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.flag"
                active-color="#13ce66"
                inactive-color="#ccc"
                :active-value="1"
                :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>


    <!-- 录入成绩弹框  -->
    <el-dialog title="录入成绩    (0~100分)" :visible.sync="inputScoreVis" width="50%">
      <el-table :data="inputScoreData" border>
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="subject" label="课程"></el-table-column>
        <el-table-column label="平时成绩">
          <div class="item" slot-scope="scope">
            <el-input  v-model="scope.row.s1"></el-input>
          </div>
        </el-table-column>
        <el-table-column label="期中成绩">
          <div class="item" slot-scope="scope">
            <el-input  v-model="scope.row.s2"></el-input>
          </div>
        </el-table-column>
        <el-table-column label="期末成绩">
          <div class="item" slot-scope="scope">
            <el-input  v-model="scope.row.s3"></el-input>
          </div>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="inputScoreVis = false">取 消</el-button>
        <el-button type="primary" @click="saveScore">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {serverIp} from "../../public/config";

export default {
  name: "Class",
  data() {
    return {
      serverIp: serverIp,
      tableData: [],
      viewDialogVis: false,   // 显示课程弹框
      editSubjectVis: false,   // 修改课程弹框
      inputScoreVis: false, // 录入课程的成绩
      options: [{
        value: '0',
        label: '男'
      }, {
        value: '1',
        label: '女'
      }],
      total: 0,
      dialogFormVisible: false, // 学生信息
      form: {},
      pageNum: 1,
      pageSize: 10,
      id: "",
      uid: "",
      name: "",
      sex: "",
      college: "",
      grade: "",
      myClass: "",
      teacher: "",
      msg: "",
      scoreId: "",
      subjectId: "",
      mySubs: [],     //  课程信息
      mySubs2: [], // 修改课程
      flag: "",
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      inputScoreData: [],// 录入成绩的课程
      s1: "",
      s2: "",
      s3: ""
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.request.get("/stu/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
          sex: this.sex,
          college: this.college,
          grade: this.grade
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    reset() {
      this.name = ""
      this.sex = ""
      this.college = ""
      this.grade = ""
      this.load()
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
    del(id) {
      this.request.delete("/stu/" + id).then(res => {
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.form = {}
    },
    save() {
      this.request.post("/stu", this.form).then(res => {
        if (res.code === '200') {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    view(name) {  // 获取要查课程的学生姓名
      this.viewDialogVis = true
      this.request.get("/subject/subjects", {
        params: {
          stuName: name
        }
      }).then(res => {
        this.mySubs = res.data
      })
    },
    editSubject(id) {   // stuId
      this.editSubjectVis = true
      this.request.get("/subject/setFlag", {
        params: {
          id: id
        }
      }).then(res => {
        this.mySubs2 = res.data
      })
    },
    editScore(id) {
      this.inputScoreVis = true
      this.request.get("/subject/inputScore", {
        params: {
          id: id
        }
      }).then(res => {
        this.inputScoreData = res.data
      })
    },
    saveScore() {
      this.$message.success('保存成绩单')
      this.inputScoreVis = false
    }
  }
}
</script>

<style scoped>
.headerBg {
  background: #eee !important;
}
</style>
